<!DOCTYPE html>
<html ng-app="memberList" ng-cloak>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/lib/navbar/css/responsive-menu.css" rel="stylesheet">
    <link href="/lib/bootstrap-datetime/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/lib/angular-ui-grid/ui-grid.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/angular-toastr/dist/angular-toastr.css"/>
    <link rel="stylesheet" href="/lib/angular-ui-select/dist/select.css">
    <link href="/css/style.css" rel="stylesheet">

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/lib/jquery/jquery.cookie.min.js"></script>
    <script src="/lib/jquery/ajaxfileupload.js"></script>

    <script src="/lib/navbar/js/modernizr.min.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/modernizr-custom.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/responsive-menu.js" type="text/javascript"></script>

    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script src="/lib/angular-ui-select/dist/select.js"></script>
    <script src="/lib/angular-ui-grid/ui-grid.min.js"></script>
    <script src="/js/grid-pagination.js"></script>
    <script src="/js/directives.js"></script>
    <script src="/lib/bootstrap-datetime/js/jquery.datetimepicker.js"></script>
    <script src="/js/memberListController.js"></script>

    <title>用户管理</title>
</head>
<body ng-controller="memberListController">

<div class="modal-add" style="display: none;z-index: -1">
    <div id="modal-c"
         style="position: absolute;background-color: #000;opacity: 0.6;z-index: -1;width: 100%;height: 100%;top:0">
    </div>
    <div id="modal-i" style="position: absolute;top:20px;left:20%;width: 80%;z-index: -1;height: auto;top:70px;">
        <iframe src="/member/add" width="80%" height="520px" scrolling="no" style="border: none"></iframe>
    </div>
</div>

<% include navbar %>

<div class="col-md-12 form-group" style="margin-top:10px">
    <div class="search-area big-panel-container">
        <input id="myRole" type="hidden" value="<%- user.role %>">

        <div class="col-md-12 big-panel">
            <div class="col-md-12 kick-padding-margin">
                <h2 class="group-head"><span>用户列表</span></h2>
            </div>

            <div class="expand-1">
                <div id="searchContent">
                    <div class="form-group col-md-3 col-sm-3">
                        <label class="search-label">用户姓名</label>
                        <input type="text" class="form-control" ng-model="filter.name">
                    </div>

                    <div class="form-group col-md-3 col-sm-3">
                        <label class="search-label">用户角色</label>

                        <ui-select ng-model="filter.role" append-to-body="true">
                            <ui-select-match>{{ $select.selected.value }}</ui-select-match>
                            <ui-select-choices repeat="item.id as item in option">
                                <div>{{ item.value }}</div>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <div class="form-group col-md-3 col-sm-3">
                        <label class="search-label">所属研发组</label>
                        <input type="text" class="form-control" ng-model="filter.team">
                    </div>

                    <div class="col-md-3 col-sm-3 kick-padding-margin" style="margin-top: 17px;padding-right: 15px;">
                        <button class="col-md-4 col-sm-4 pull-right btn btn-danger margin-top" ng-click="reset()"><i
                                    class="fa fa-clock-o"></i>&nbsp;&nbsp;重置
                        </button>
                        <button class="col-md-4 col-sm-4 pull-right btn btn-primary margin-top"
                                style="margin-right: 20px;" ng-click="search()">
                            <i class="fa fa-search"></i>&nbsp;&nbsp;搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="result-area big-panel-container">
        <div class="col-md-12 big-panel kick-padding-margin" style="padding-bottom: 30px">
            <div class="col-md-12 kick-padding-margin  margin-top-40">
                <!-- h2 class="group-head"><span>用户列表</span></h2 -->

                <div class="col-md-12 ">
                    <% if(user.role === 'admin') { %>
                    <div class="btn-toolbar grid-toolbar" role="toolbar">
                        <div class="col-md-10">
                        </div>
                        <button type="button" class="pull-right col-md-1 btn btn-success btn-sm grid-menu-btn"
                                ng-click="importExcel()" style="margin-left: 15px;"><i class="fa fa-table"></i>&nbsp;&nbsp;批量导入&nbsp;&nbsp;
                        </button>
                        <button type="button" class="pull-right col-md-1 btn btn-primary btn-sm grid-menu-btn"
                                style="margin-bottom: 10px"
                                ng-click="addMember()"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加账号&nbsp;&nbsp;</button>
                    </div>
                    <% } %>
                    <div ui-grid="gridOption" theme="bootstrap" ng-style="{height:(gridOption.data.length*30)+55+'px'}"
                         ui-grid-resize-columns ui-grid-pagination ui-grid-selection>
                    </div>
                    <% if(user.role === 'admin') { %>
                    <button type="button" class="pull-left margin-top col-md-1 btn btn-warning btn-sm grid-menu-btn"
                            ng-click="deleteMember()" style="color: #F44"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;批量删除&nbsp;&nbsp;
                    </button>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade  remove-mem" style="position: absolute;top:40px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">确认删除用户？</h4>
            </div>
            <div class="modal-body" style="height: 70px;">
                <button type="button" class="btn btn-success col-md-2 pull-right" id="ensure-remove">确认</button>
                <button type="button" class="btn btn-warning col-md-2 pull-right" style="margin-right: 20px"
                        data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade  batch-import" style="position: absolute;top:40px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">请按照Excel模板上传文件批量导入,<a href="/temp/userTemplate.xlsx">点击下载模板Excel</a></h4>
            </div>
            <div class="modal-body" style="height: 180px;">
                <div class="col-md-12 form-group margin-top" style="height: 80px;">
                    <h4 class="control-label">上传Excel文件</h4>
                    <input id="fileReplace" class="form-control" type="text" readonly onclick="file.click()"
                           placeholder="点击上传"/>
                    <button onclick="file.click()" class="btn btn-primary fa fa-file-excel-o" style="position: relative;left:81%;top:-30px;">&nbsp;选择文件</button>
                    <input style="display: none" type="file" name="file" id="file" onchange="uploadFile()" accept=".xlsx"
                           placeholder="点击上传"/>
                </div>
                <div class="col-md-12">
                    <button type="button" class="btn btn-success col-md-2 pull-right" id="ensure-remove"
                            onclick="uploadFile(1)">导入
                    </button>
                    <button type="button" class="btn btn-warning col-md-2 pull-right" style="margin-right: 20px"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function ($) {
        var menu = $('.rm-nav').rMenu({
            minWidth: '960px'
        });
    });
    $('[data-toggle="tooltip"]').tooltip();
</script>
</body>
</html>